// 人员管理
<template>
  <div class="containerBox wrap">
    <!-- 查询form -->
    <cusCard>
      <el-form :model="personForm" :inline="true" @keyup.enter="searchHandler">
        <el-form-item label="账号">
          <el-input v-model.trim="personForm.account" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model.trim="personForm.username" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model.number="personForm.linkphone" onkeyup="value=value.replace(/[^\d]/g,'')"
            placeholder="请输入联系方式" clearable />
        </el-form-item>
        <el-form-item>
          <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
          <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
          </cusButton>
        </el-form-item>
      </el-form>
    </cusCard>

    <!-- 人员table -->
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="personTableData" :tableColumns="tableColumns" @changeCol="changeCol" height="500px">
        <template #picurl="{ row }">
          <div class="imgBox">
            <el-image style="width: 100%; height: 100%" :src="row.picurl" :fit="fit" :preview-src-list="[row.picurl]"
              :preview-teleported="true" lazy></el-image>
            <!-- <div class="mask" @click="previewPic(row.picutl)">
              <SvgIcon icon-class="eye" size="20px" color="#fff"></SvgIcon>
            </div>-->
          </div>
        </template>
        <template #isOpen="{ row }">
          <el-switch v-model="row.isOpen" />
        </template>
        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)">编辑
          </cusButton>
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="resetPsdHandler(row)">重置密码
          </cusButton>
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="houndHandler(row)">设备绑定
          </cusButton>
        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @changeHandler="changeHandler"></cusPagination>
      </div>
    </cusCard>

    <!-- 编辑/添加人员弹框 -->
    <editDialog ref="editRef"></editDialog>
    <!-- 设备绑定穿梭框 -->
    <bound ref="boundRef"></bound>
    <!-- <cusDialog
      width="60%"
      ref="picDialog"
      :showCancle="false"
      :showConfrim="false"
      @mousewheel.prevent="rollImg"
    >
      <el-image
        style="width: 100%; height: 100%"
        :style="`{transform: scale(${imgScale});}`"
        :src="perviewPic"
        :fit="fit"
        ref="image"
      ></el-image>
    </cusDialog>-->
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { View } from "@element-plus/icons-vue";
import editDialog from "./components/editDialog.vue";
import bound from "./components/bound.vue";
const router = useRouter();
import {
  PersonFormType,
  PersonRowType,
  UnitsColType,
} from "@/api/tissuesframe/types";
import { personTableData } from "./tableData";
import { imageEmits } from "element-plus";
// 查询条件表单初始值
const formOrigin = () => ({
  account: "",
  username: "",
  linkphone: "",
});

let personForm: PersonFormType = reactive(formOrigin());

// 查询事件
const searchHandler = () => {
  console.log(personForm.value);
  console.log(1111);
};
// 重置查询条件
const resetHandler = () => {
  Object.assign(personForm, formOrigin());
  searchHandler();
};

// table列数据
const tableColumns: UnitsColType[] = reactive([
  { label: "账号", prop: "account", width: "130" },
  { label: "姓名", prop: "username" },
  { label: "图片", prop: "picurl", slot: true, width: "80" },
  { label: "联系方式 ", prop: "linkPhone", width: "130" },
  { label: "所属组织", prop: "tissuesname", width: "200" },
  { label: "职位", prop: "position" },
  { label: "启用状态 ", prop: "isOpen", slot: true },
  { label: "创建时间 ", prop: "createTime", width: "200", sortable: true },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "200",
    fixed: "right",
  },
]);

// 添加事件
const editRef = ref(null);
const addHandler = (type, data) => {
  let tit = type === "add" ? "人员添加" : "修改人员信息";
  if (type === "edit") {
    editRef.value.personForm = data;
  }
  editRef.value.showHandler(tit);
};
const boundRef = ref(null);
const houndHandler = (row) => {
  boundRef.value.show();
  console.log(row);
};
// 切换分页
const pagesize = ref(10);
const changeHandler = () => { };

// 改变列排序
const changeCol = ({ oldIndex, newIndex }: PropType) => {
  const empty = 2; // 跳过选择框和序号列
  const oldItem = tableColumns[oldIndex - empty];
  tableColumns.splice(oldIndex - empty, 1);
  tableColumns.splice(newIndex - empty, 0, oldItem);
};

// 重置密码
const resetPsdHandler = () => { };
// 预览图片
// const perviewPic = ref("");
// const picDialog = ref(null);
// const previewPic = (picurl: string) => {
//   picDialog.value.show = true;
//   perviewPic.value = picurl;
// };
// const image = ref(null);
// const imgScale = ref(1);
// const rollImg = (e: Event) => {
//   console.log(image.value);
//   let delta = 0;
//   if (e.wheelDelta) {
//     //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
//     delta = e.wheelDelta / 120;
//     if (window.opener) delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
//   } else if (e.detail) {
//     //FF浏览器使用的是detail,其值为“正负3”
//     delta = -e.detail / 3;
//   }
//   if (delta < 0 && imgScale.value > 0.4) {
//     imgScale.value -= 0.1;
//   } else if (delta > 0 && imgScale.value < 3) {
//     imgScale.value += 0.1;
//   }
//   console.log(imgScale.value);
// };
</script>

<style lang="scss" scoped>
.imgBox {
  width: 60px;
  height: 60px;
  position: relative;

  .mask {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.5);
    color: #ffffff;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:hover .mask {
    opacity: 1;
  }
}
</style>